import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Input, Form, Space, Tooltip } from 'antd';

import PickColor from '@/components/PickColor';

export default function ColorManager() {
  return (
    <Form.List name="colors">
      {(fields, { add, remove }) => (
        <>
          {fields.map(({ key, name }) => {
            return (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item<any> label="" name={[name, 'color']}>
                  <PickColor />
                </Form.Item>
                <Form.Item<any> label="" name={[name, 'cn']}>
                  <Input prefix="中文" />
                </Form.Item>
                <Form.Item<any> label="" name={[name, 'en']}>
                  <Input prefix="英文" />
                </Form.Item>
                <Tooltip placement="top" title="删除此行">
                  <DeleteOutlined onClick={() => remove(name)} />
                </Tooltip>
              </Space>
            );
          })}
          <Tooltip placement="top" title="新增一行">
            <PlusCircleOutlined onClick={() => add()} />
          </Tooltip>
        </>
      )}
    </Form.List>
  );
}
